<template>
	<view class="content">
		
		<!-- <view class="my-shop-hd">
			<view class="user-info">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" :title="userusername == null ? '暂无' : userusername"
					 avatar="/static/img/img.png" :note="usermobile == null ? '暂无' : usermobile"
					  v-if="useravatar == '' || useravatar == null"></uni-list-chat>
					<uni-list-chat  :title="userusername == null ? '暂无' : userusername"
					 :avatar="useravatar" :note="usermobile == null ? '暂无' : usermobile" v-else></uni-list-chat>
				</uni-list>
				<view class="city"><uni-icons type="location" size="14"></uni-icons> {{addressvalue}}</view>
			</view>
			<view class="my-card weui-media-box_appmsg">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text>超级抵现卡</text>
				</view>
				<navigator class="instructions" url="privilege_statement">特权使用说明</navigator>
			</view>
		</view> -->
		<top-userinfo :userusername="userusername" ref="topuserinfo" :parentData="true"></top-userinfo><!-- @childEvent="getchildEvent" -->
		<view class="uni-padding-wrap">
			<view class="selectlist">
				<uni-data-select v-model="orderby" :localdata="orderayrange" placeholder="综合排序" @change="rangechange"
				 class="selectitem"></uni-data-select>
				<uni-data-select v-model="rangevalue" :localdata="range" placeholder="请选择行业" @change="rangechange"
				 class="selectitem"></uni-data-select>
				
			</view>
			<!-- <view class="kmnumber" @click="getlocationinfo">
				获取距离
			</view> -->
			<scroll-view
				style="height: 60vh;"
				:scroll-y="true"
				:refresher-threshold="10"
				:scroll-top="scrollTop"
				@scrolltolower="handelLower"
				:refresher-enabled="isLoadingTop"
				:refresher-triggered="isTriggeredTop"
				@refresherrefresh="handleRefresher"
				@refresherrestore="handelonRestore"
				>
				<!-- <navigator class="shop-list" :url="'shop_detail?id='+item.shop_id" v-for="(item,index) in listarr" :key="index"> -->
				<view class="shop-list" v-for="(item,index) in listarr" :key="index">
					<!-- <view class="shop-portrait">
						<img :src="item.avatat" alt="" v-if="item.avatat" />
						<img src="../../static/img/img.png" alt="" v-else />
					</view> -->
					<view class="shop-con" @click="shopdetail(item)">
						<h4 class="uni-h5 shop-name">{{item.shop_name}}</h4>
						<text class="shop-address">{{item.address}}</text>
						<text class="shop-time">营业时间：{{item.business_start_time}}-{{item.business_end_time}}</text>
						<view class="kmnumber" v-if="isNumber(item.distance)">
							距您:{{item.distance}}KM
						</view>
						<view class="kmnumber" v-else>
							<!--距您:{{item.distance}}-->
							获取距离
						</view>
						
					</view>
					<view class="shop-info">
						<text class="shop-integral" @click="shopdetail(item)">兑换金占比 {{exexchange_proportion(item.exchange_proportion)}}% <i class="icon-rise icon-primary"></i></text>
						<uni-icons class="shop-more" type="right" size="14"></uni-icons>
						<view class="shop-status" v-if="item.business_status == 1">
							<uni-icons type="phone-filled" size="14" @click="dialogToggle('info',item)"></uni-icons>
							<text class="b-status">营业中</text>
						</view>
						
						<view class="shop-status shop-status-rest" v-if="item.business_status == 0">
							<!-- <uni-icons type="phone-filled" size="14"></uni-icons> -->
							<text class="b-status">休息中</text>
						</view>
						
					</view>
				</view>
				<uni-load-more :status="status"/>
			</scroll-view>
			<view class="popnolistnum" v-if="listarr.length<=0">
				<uni-icons type="help-filled" color="#f5c481" size="46" @click="toggle('center')"></uni-icons>
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<text class="text">
							尊贵的会员您好，欢迎关注超级抵现卡！当您参加商家的活动并成为商家尊贵的会员时，您所参加活动的商家列表将在此页面展示！
						</text>
					</view>
				</uni-popup>
			</view>
		</view>
		
		
		
		
		<!-- ///////////////////// 旧版内容 勿删！！///////////////////// -->
		<view class="weui-media-box my-shop-hd" style="display: none;">
			<view class="weui-media-box_appmsg">
				<view class="weui-media-box__hd">
					<img class="weui-media-box__thumb" src="/static/img/img.png" alt="" v-if="useravatar == '' || useravatar == null" />
					<img class="weui-media-box__thumb" :src="useravatar" alt="" v-else />
				</view>
				<view class="weui-media-box__bd">
					<view class="weui-media-box__title">
						<text class="name">{{userusername}}</text> 
						<!-- <navigator class="name-edit" @click="name_edit"><i class="icon-edit-square"></i></navigator> -->
					</view>
					<!-- <text class="phone" @click="openDialog" v-if="usermobile == '' || usermobile == null">
						点击绑定手机号
					</text> -->
					<text class="phone">
						{{usermobile}}
						<!-- <navigator class="phone-edit" @click="gobindpone"><i class="icon-edit-square"></i></navigator> -->
					</text>
				</view>
			</view>
			<view class="my-card weui-media-box_appmsg">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text class="">我的超级抵现卡</text>
					<text class="weui-cell__desc">兑换金额当钱花</text> 
				</view>
				<navigator class="instructions weui-btn weui-btn_mini">特权使用说明</navigator>
			</view>
			<!-- <view class="tag-view">
				<uni-tag :circle="true" text="超级特权会员" type="success" size="normal" />
			</view> -->
			<!-- <img src="../../static/img/my_bg.png" alt="" /> -->
			<!--  -->
						
		</view>
		<!-- <uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
					</uni-popup> -->
		
		
		<!-- <view class="uni-flex uni-column">
			<view class="shop-list">
				<view class="text shop-list-hd">入驻商家</view>
				<scroll-view
				            class="dialogue-box"
				            style="height: 48vh"
				            :scroll-y="true"
				            :refresher-threshold="10"
				            :scroll-top="scrollTop"
				            @scrolltolower="handelLower"
				            :refresher-enabled="isLoadingTop"
				            :refresher-triggered="isTriggeredTop"
				            @refresherrefresh="handleRefresher"
				            @refresherrestore="handelonRestore"
				          >
					<navigator class="shop-list-bd" :url="'shop_detail?id='+item.shop_id" v-for="(item,index) in listarr" :key="index">
						<view class="shop-list-portrait">
							<img :src="item.avatat" alt="" v-if="item.avatat" />
							<img src="../../static/img/img.png" alt="" v-else />
						</view>
						<view class="shop-list-info">
							<h4 class="uni-h4 shop-name">{{item.shop_name}}</h4>
							<text class="shop-address">{{item.address}}</text>
							<text class="shop-integral">兑换金占比 {{exexchange_proportion(item.exchange_proportion)}}% <i class="icon-rise icon-primary"></i></text>
							<text class="shop-more"><i class="icon-right"></i></text>
						</view>
					</navigator>
					<uni-load-more :status="status"/>
				</scroll-view>
				
			</view>
		</view> -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="拨打" title="客服电话" 
			:content="servicephone" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
	
	
</template>

<script>
	import {shopcommongetallindustries,shopcommongetallprovinces,userget_shop_list} from "@/api/apiinfo";
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
		data() {
		    return {
		      pickerRange: [], // 存储省市区数据
		      selectedProvince: '请选择', // 当前选择的省份
		      selectedCity: '', // 当前选择的城市
			  
			  addressinfo: [],
			  storageAdd: [0,0],
			  addressvalue:'未定义位置',
			  postdata:{
			  	province:'',//省份
			  	city:'',//城市
			  	address:'',//店面详细地址
			  },
			  shopnumber:0,
			  usermobile:'',
			  userusername:'',
			  usernickname:'',
			  useravatar:'',
			  
			  // 店铺筛选
			  rangevalue: null,
			  orderby:null,
			  range: [
			    { value: 0, text: "全部" },
			    // { value: 1, text: "胖姐烧烤" },
			    // { value: 2, text: "瑞幸咖啡" },
			  ],
			  orderayrange: [			    
			    { value: 1, text: "人气排序" },
			    { value: 2, text: "距离排序" },
			  ],
			  pagenumber:1,
			  listarr:[],
			  
			  status: 'more',
			  scrollTop: "50px",
			  loadings: "加载中。。。", //more/loading/noMore
			  isLoadingTop: true,
			  isTriggeredTop: true,
			  isShowBtm: false,
			  
			  msgType:'',
			  servicephone:null,
			  
			  reloadChild:0
		    };
		  },
		  mounted() { ////////////////// uni组件样式重定义 
			this.getlocationinfo()//获取位置
		  // 		var str = document.getElementsByClassName("uni-list-chat__header-image");
		  // 		Array.prototype.forEach.call(str, function(headerImage){
		  // 			headerImage.style.margin = "0";
		  // 		});
				// var str = document.getElementsByClassName("uni-list-chat__content-title");
				// Array.prototype.forEach.call(str, function(contentTitle){
				// 	contentTitle.style.color = "#fff";
				// });
				// var str = document.getElementsByClassName("uni-list-chat__content-note");
				// Array.prototype.forEach.call(str, function(contentNote){
				// 	contentNote.style.color = "#fff";
				// });
				
				// var str = document.getElementsByClassName("uni-select");
				// Array.prototype.forEach.call(str, function(select){
				// 	select.style.width = "100%";
				// });
				
				// let query1 = uni.createSelectorQuery().in(this).select(".uni-list-chat__header")
				// Array.prototype.forEach.call(query1, function(headerImage){
				// 		headerImage.style.borderRadius = "50%";
				// });
				// let query2 = uni.createSelectorQuery().in(this).select(".uni-list-chat__header-image")
				// Array.prototype.forEach.call(query2, function(headerImage){
				// 		headerImage.style.margin = "0";
				// });
				// let query3 = uni.createSelectorQuery().in(this).select(".uni-list-chat__content-title")
				// Array.prototype.forEach.call(query3, function(headerImage){
				// 		contentTitle.style.color = "#fff";
				// });
				// let query4 = uni.createSelectorQuery().in(this).select(".uni-list-chat__content-note")
				// Array.prototype.forEach.call(query4, function(headerImage){
				// 		contentTitle.style.color = "#fff";
				// });
				// let query5 = uni.createSelectorQuery().in(this).select(".uni-select")
				// Array.prototype.forEach.call(query5, function(headerImage){
				// 		select.style.width = "100%";
				// });
		  },
		  onShow() {
			  // let user_name = localStorage.getItem('username')
			  // if(user_name == '' || user_name == null){
			  // 	user_name = localStorage.getItem('nickname')
			  // }
			  // this.userusername = user_name;
			  this.$nextTick(() => {
			      this.$refs.topuserinfo.getuserreload()
				  this.$refs.topuserinfo.reloadaddress()    
			  });
		  	// console.log('显示onshow:'+localStorage.getItem('shopnumber'))
			// this.shopnumber = localStorage.getItem('shopnumber');
			// this.userusername = localStorage.getItem('username');
			
			
			// this.userusername = localStorage.getItem('username');
			// this.usernickname = localStorage.getItem('nickname');
			// this.useravatar = localStorage.getItem('avatar');
			// this.usermobile = localStorage.getItem('mobile');
			// this.shopnumber = localStorage.getItem('shopnumber');
			
			// let provincearr = localStorage.getItem('province');
			// let cityarr = localStorage.getItem('city');
			// if(provincearr != null && provincearr != ''){
			// 	provincearr = JSON.parse(provincearr);
			// 	cityarr = JSON.parse(cityarr);
			// 	console.log(JSON.stringify(provincearr))
			// 	this.storageAdd[0] = provincearr.id;
			// 	this.storageAdd[1] = cityarr.id;
			// 	this.addressvalue = provincearr.name;
			// 	this.addressvalue += ' - '+cityarr.name;
			// }
			// console.log('==='+this.useravatar)
			// this.reloadChild +=1
			
			this.getshopcommongetallindustries()//获得所有行业
			this.getshoplist();//获取商户列表
			// this.getshoplist();//获取商户列表
		  },
		  onLoad() {
		    // this.initPicker();
			// this.getshopcommongetallprovinces();
			// {province: 37, city: 84}
			// localStorage.setItem('userToken', 'k29rv2ozQHQJkb4qLEbLCTm087Th5A1lsWCdoMpiqFVeiamh');
			// localStorage.setItem('province', JSON.stringify({
			// 	"id": 37,
			// 	"name": "河北省"
			// }));
			// localStorage.setItem('city', JSON.stringify({
			// 	"id": 84,
			// 	"name": "邯郸市"
			// }));
			// localStorage.setItem('username', '于金鹏'); //上线后需删除
			// localStorage.setItem('mobile', '13295458250');//上线后需删除
			
			
			// this.getshoplist();//获取商户列表
			
			// this.userusername = localStorage.getItem('username');
			// this.usernickname = localStorage.getItem('nickname');
			// this.useravatar = localStorage.getItem('avatar');
			// this.usermobile = localStorage.getItem('mobile');
			// this.shopnumber = localStorage.getItem('shopnumber');
			
			// let provincearr = localStorage.getItem('province');
			// let cityarr = localStorage.getItem('city');
			// if(provincearr != null && provincearr != ''){
			// 	provincearr = JSON.parse(provincearr);
			// 	cityarr = JSON.parse(cityarr);
			// 	console.log(JSON.stringify(provincearr))
			// 	this.storageAdd[0] = provincearr.id;
			// 	this.storageAdd[1] = cityarr.id;
			// 	this.addressvalue = provincearr.name;
			// 	this.addressvalue += ' - '+cityarr.name;
			// }
			
			
			
		  },
		methods: {
			isNumber(value) {
			    return typeof value === 'number';
			},
			getlocationinfo(){
				let that = this
				uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
				        console.log('授权成功');
				        // 调用getLocation获取位置信息  
						uni.getLocation({
						    type: 'gcj02', // 可选，默认为 wgs84 返回gps坐标，gcj02 返回可用于uni-app的坐标
						    success: function (res) {
						        console.log('位置信息：');
								console.log(JSON.stringify(res))
						        // res.latitude, res.longitude 分别为经纬度信息
						        // 可以使用这些信息通过其他API服务（如高德地图、腾讯地图等）进行地址解析
								let datas = {
									longitude:res.longitude,
									latitude:res.latitude
								}
								that.submitll(datas)
						    },
						    fail: function (err) {
						        console.log('获取位置失败', err);
						    }
						});
				    },
				    fail() {
				        console.log('授权失败');
				        // 处理用户拒绝授权的情况
				    }
				});
			},
			submitll(datas){
				sync_coordinates(datas).then((res) => {
					console.log("sync_coordinates接口返回数据：")
					console.log(JSON.stringify(res));
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			dialogConfirm(){
				if(this.servicephone != null || this.servicephone != ''){
					uni.makePhoneCall({
						phoneNumber: this.servicephone
					});
				}
				
			},			
			dialogClose(){ //联系客服 关闭
				
			},
			dialogToggle(type,item) {
				this.servicephone = item.mobile
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			shopdetail(item){
				 uni.navigateTo({ //内部页面跳转方式
				 	url: '/pages/shop/shop_detail?id='+item.shop_id,
				 })
			},
			getchildEvent(arrval){//接收子组件的数据
				console.log("父组件接收子组件的数据：")
				console.log(JSON.stringify(arrval))
				// uni.navigateTo({ //内部页面跳转方式
				// 	url: '/pages/shop/settlement?userid='+arrval,
				// })
			},
			getshopcommongetallindustries(){//获得所有行业
				shopcommongetallindustries().then((res) => {
					console.log("shopcommongetallindustries接口返回数据：")
					console.log(JSON.stringify(res.data)); 
					let arrinfo = res.data
					let temparr = [{ value: 0, text: "全部行业" }]
					if(arrinfo.length>=1){
						for (var i = 0; i < arrinfo.length; i++) {
							temparr.push({
								value: arrinfo[i].id, text: arrinfo[i].name
							}) 
						}
					}
					this.range = temparr
					this.rangevalue = null
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.errMsg){
						uni.showModal({
							title: '提示',
							content: '报错：'+err.errMsg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			exexchange_proportion(num){
				let tempnum = 0
				if(num != '' && num != null){
					tempnum = parseFloat(num) * 100
				}
				return tempnum
			},
			handelLower() {
				console.log("滚动到底部>>>");
				if (this.status == "loading") return;
				if (!this.status == "noMore") return;
			
				this.pagenumber += 1;
			  
				this.getshoplist(true);
			},
			handleRefresher() {
			  console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
			  this.isLoadingTop = true;
			  this.isTriggeredTop = true;
			  if (!this.isLoadingTop) return;
			  
			  // this.$store.commit("setShipGuids", "");
			  this.getshoplist();
			  this.isLoadingTop = false;
			  this.isTriggeredTop = false;
			},
			handelonRestore() {
			  console.log("handelonRestore>>>");
			  this.isLoadingTop = true; 
			},
			getshoplist(load){
				let data = {industry_id:'',orderby:this.orderby}
				if(this.rangevalue == 0){
					data.industry_id = ''
				}else{
					data.industry_id = this.rangevalue	
				}
				userget_shop_list(this.pagenumber,data).then((res) => {
					console.log("userget_shop_list接口返回数据：")
					console.log(JSON.stringify(res)); 
					this.shopnumber = res.data.total
					uni.setStorageSync('shopnumber',res.data.total);
					if(load){
						if (res.data.list && res.data.list.length == 0) {
							uni.hideLoading();
							uni.showToast({
								title: '没有更多了',
								duration: 2000
							});
							this.status = 'noMore'
							this.pagenumber -= 1;
						} else {
							this.listarr = this.listarr.concat(res.data.list);
							uni.hideLoading();
							this.status = 'more'
						}
					}else{
						if(res.data.list.length >=1){
							this.listarr = res.data.list
							this.status = 'more'
							uni.hideLoading();
						}else{
							this.status = 'noMore'
							this.listarr = []
						}
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.errMsg){
						uni.showModal({
							title: '提示',
							content: '报错：'+err.errMsg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			gobindpone(){
				uni.navigateTo({ //底部导航跳转方式
					url: '/pages/shop/bind_phone?type=2'
				});
			},
			
			
			openDialog() {
				uni.navigateTo({ //内部页面跳转方式
					url: '/pages/shop/bind_phone'
				})
			  
			},
			//输入对话框 修改名字
			name_edit() {
				this.$refs.nameDialog.open()
			},
			//输入对话框 修改手机号
			// phone_edit() {
			// 	this.$refs.phoneDialog.open()
			// },
			
			rangechange(e) {// 行业筛选
				// console.log("e:", e);
				// console.log(this.rangevalue)
				this.pagenumber = 1;
				this.listarr = []
				this.getshoplist();
			},
			// orderbayselectchange(e) {// 排序筛选
			// 	// console.log("e:", e);
			// 	// console.log(this.rangevalue)
			// 	this.pagenumber = 1;
			// 	this.listarr = []
			// 	this.getshoplist();
			// },
		}
	};
	
</script>

<style lang="scss">
	.content{
		// padding: 30rpx;
		position: relative;
		.bg-radius{
			border-radius: 30rpx;
			box-sizing: border-box;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
			color: #101010;
			background-color: #fff;
		}
		
		
		.shop-list{
			margin-top: 30rpx;
			display: flex;
			align-items: start;
			padding: 10rpx;
			background-color: #fff;
			// .shop-portrait{
			// 	width: 18%;
			// 	img{
			// 		width: 100rpx;
			// 		width: 100rpx;
			// 		border-radius: 30rpx;
			// 	}
			// }
			
			.shop-con{
				// width: 75%;
				width: 100%;
				position: relative;
				text{
					font-size: 24rpx;
					display: block;
					margin-top: 10rpx;
				}
				.shop-name{
					color: #000;
				}
				.shop-time, .shop-address{
					color: #5c5a5a;
				}
				.shop-time{}
				.kmnumber{
					position: absolute;
					right: 0rpx;
					bottom: 3rpx;
					border-radius: 60rpx;
					display: inline-block;
					padding: 0rpx 8rpx;
					border: 1px solid #e6202f;
					font-size: 22rpx;
				}
			}
			.shop-info{
				width: 45%;
				text-align: right;
				text{
					font-size: 24rpx;
					display: inline-block;
				}
				.shop-integral{
					font-weight: 700;
				}
				.shop-status, .shop-status-rest{
					margin-top: 30rpx;
					color: rgba(230, 32, 47, 1);
					.b-status{
						background-color: rgba(230, 32, 47, 1);
						display: inline-block;
						padding: 2rpx 10rpx;
						border-radius: 6rpx;
						margin-left: 30rpx;
						font-size: 24rpx;
						color: #fff;
					}
				}
				.shop-status-rest{
					color: #7b7778;
					.b-status{
						margin-left: 0;
						background-color: #7b7778;
					}
				}
			}
			
		}
	}
	page{
		background-color: #f9f9f9;
	}
	.uni-list-chat__header{
			border-radius:50% !important
		}
		.uni-list-chat__header-image{
			margin:0 !important
		}
		// .uni-list-chat__content-title{
		// 	color:#ffffff !important
		// }
		// .uni-list-chat__content-note{
		// 	color:#ffffff !important
		// }
		.uni-select{
			width:100% !important
		}
		.popup-content {
			// @include flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 50px;
			color: #000;
			font-size: 28rpx;
			overflow: hidden;
			background-color: #fff;
		
			width: 600rpx;
			
		}
	.popnolistnum{
		position: absolute;
		top: 50%;
		left: 44%;
		z-index: 99;
	}
	.selectlist{
		margin-top: 30rpx;
		position: relative;
		.uni-select {
			background-color: #FFFFFF !important;
			border-radius: 6rpx;
		}
		.selectitem{
			width: 46%;
			display: inline-block;
			// float: right;
		}
		.selectitem:nth-child(2){
			float: right !important;
		}
	}
</style>
